﻿<%@ Page Title="Promotion Engine - Customer Property" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="Customer-Property.aspx.cs" Inherits="PromotionEngine.Customer_Property" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        var oCustomerProperty = {};
        var oCustomerPropertyDetail = {};
        var isInsert = false;
        var gird;
        var girdDetail;
        var wnd, detailsTemplate;
        var jsonReferenceValue = {};
        function referenceDropDownEditor(container, options) {
            $('<input required data-text-field="ReferenceName" data-value-field="ReferenceValue" ID="ReferenceValue" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: jsonReferenceValue
                        });
        }
        function showDetails(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Property Detail",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 705,
                            height: 550,
                            content: { type: "POST", url: "CustomerPropertyDetail.aspx?PropertyID=" + dataItem.PropertyID + "&PropertyCode=" + dataItem.PropertyCode + "&PropertyName=" + dataItem.PropertyName, data: { "property": kendo.stringify(dataItem)} },
                            iframe: true
                        }).data("kendoWindow");
            wnd.center().open();

        }
        function GetAllReferenceValue() {
            $.ajax({
                type: "GET",
                url: "Company.aspx/GetAllReferenceValue",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jsonReferenceValue = $.parseJSON(data.d)
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (xhr, status, err) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        }
        $(document).ready(function () {
            GetAllReferenceValue();
            //Load Grid
            grid = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            type: "GET",
                            url: "Customer-Property.aspx/GetCustomerPropertys",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        destroy: {
                            type: "GET",
                            url: "Customer-Property.aspx/DeleteCustomerProperty",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        parameterMap: function (data, operation) {
                            if (operation === "destroy") {
                                return { propertyID: data.PropertyID };
                            }
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true
                    },
                    type: "odata", //Important!!!!
                    schema: {
                        data: function (a) {
                            if (a.d != null) {
                                var data = a.d.Data;
                                return data;
                            }
                        },
                        total: "d.Count",
                        model: {
                            id: "PropertyID",
                            fields: {
                                PropertyID: { type: "string", validation: { required: true} },
                                CompanyCode: { type: "string", validation: { required: true} },
                                PropertyName: { type: "string", validation: { required: true} },
                                PropertyCode: { type: "string", validation: { required: true} },
                                PropertyValueType: { type: "string", validation: { required: true} },
                                CompanyName: { type: "string", validation: { required: true} }
                            }
                        }
                    }
                },
                sortable: true,
                pageable: {
                    pageSize: 20,
                    refresh: true
                },
                filterable: true,
                reorderable: true,
                resizable: true,
                selectable: "row",
                height: 450,
                toolbar: [{ name: 'create', text: 'Add New Property' }, { name: 'excel'}],
                excel: {
                    fileName: "Customer Property List.xlsx",
                    filterable: true,
                    allPages: true
                },
                batch: true,
                columns: [  { field: "CompanyCode", title: "CompanyCode", width: 100, hidden: true },
                            { field: "PropertyID", title: "Property ID", width: 100, hidden: true },
                            { field: "PropertyCode", title: "Property Code", width: 130 },
                            { field: "PropertyName", title: "Property Name", width: 300 },
                              { field: "ReferenceName", title: "Property Type ", width: 300 },
                            { field: "CompanyName", title: "Company "},
//                            { field: "PropertyValueType", title: "Property Type ", width: 300, editor: referenceDropDownEditor, template: "#=ReferenceName#" },
                            { command: ["edit", "destroy", { text: "Details", click: showDetails}], title: "Action", width: "270px" }
                            ],
                editable: {
                    mode: "popup",
                    template: $("#template").html(),
                    confirmation: "Are you sure you want to remove this property?"
                },
                edit: function (e) {
                    $('#ddlReferenceValue').kendoDropDownList({
                        optionLabel: "[Select Property Type]",
                        dataTextField: "ReferenceName",
                        dataValueField: "ReferenceValue",
                        dataSource: {
                            data: jsonReferenceValue
                        }
                    });
                    var editWindow = e.container.data("kendoWindow");
                    if (e.model.isNew()) {
                        e.container.data("kendoWindow").title('Add New Property');
                        $("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";
                        isInsert = true;
                    }
                    else {
                        e.container.data("kendoWindow").title('Edit Property');
                        $('[name="PropertyID"]').attr("readonly", true);
                        isInsert = false;
                    }
                },
                remove: function (e) {
                },
                save: function (e) {
                    var listTextBox = $("input:text");
                    for (var i = 0; i < listTextBox.length; i++) {
                        var name = listTextBox[i].name;
                        if (name.length > 0) {
                            oCustomerProperty[name] = $("[name=" + name + "]").val();
                        }
                    }
                    oCustomerProperty.PropertyValueType = $("#ddlReferenceValue").val();
                    oCustomerProperty.ReferenceValue = $("#ddlReferenceValue").val();
                    //Update or Insert Company
                    $.ajax({
                        type: "POST",
                        url: "Customer-Property.aspx/UpdateCustomerProperty",
                        data: JSON.stringify({
                            oCustomerProperty: JSON.stringify(oCustomerProperty),
                            isInsert: isInsert
                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            //Reload Data 
                            //if (isInsert) {
                                grid.dataSource.read();
                            //}
                        },
                        error: function (xhr, status, err) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                    this.refresh();
                }
            }).data("kendoGrid");
        });
    </script>
    <script type="text/x-kendo-template" id="template">  
       <div class="k-edit-label" style="display: none">
            <label for="PropertyID">
                Property ID</label></div>
        <div class="k-edit-field" data-container-for="PropertyID" style="display: none">
            <input name="PropertyID" class="k-input k-textbox" type="text"
                data-bind="value:PropertyID" id="PropertyID"></div>
        <div class="k-edit-label">
            <label for="PropertyCode">
                Property Code</label></div>
        <div class="k-edit-field" data-container-for="PropertyCode">
            <input name="PropertyCode" class="k-input k-textbox" required="required" type="text"
                data-bind="value:PropertyCode"></div>
        <div class="k-edit-label">
            <label for="PropertyName">
                Property Name</label></div>
        <div class="k-edit-field" data-container-for="PropertyName">
            <input name="PropertyName" class="k-input k-textbox" required="required" type="text"
                data-bind="value:PropertyName"></div>
                 <div class="k-edit-label">
            <label for="PropertyValueType">
                Property Type</label></div>
        <div data-container-for="PropertyValueType" class="k-edit-field">
             <input id="ddlReferenceValue" name="PropertyValueType" data-bind="value:PropertyValueType" required="required" validationMessage = "Property Type is required")>
        </div>
    </script>
    <script type="text/x-kendo-template" id="DetailTemplate">
    <h2>Property Code: #= PropertyCode # - Property Name: #= PropertyName #</h2>
    <em style="display:none"  id="propertyIDForDetail">#= PropertyID #</em>   
    <hr>
    <div id="gridDetail">
    </div>
    </script>
    <div id="details">
    </div>
    <div style="position: absolute; z-index: 0; margin-right: 8px;">
        <div id="grid">
        </div>
    </div>
</asp:Content>
